<script>
    import Card from "../base/Card.svelte";
    import Bar from "../base/Bar.svelte";
    import MapManager from "../../scripts/maps/MapManager.js";
    import {onMount} from "svelte";
    import {mapEventBus} from "../../eventbus/map_signal.js";
    import SaveManager from "../../scripts/save/SaveManager.js";

    export let clazz
    export let get_character = () => {
        throw Error("请传入本函数CharacterCard，用于展示用户")
    }

    let mapManager ;
    let saveManager;
    onMount(
        ()=>{
            mapManager = new MapManager(window)
        }
    )

    function character_goto(){
        if(!mapManager){
            mapManager = new MapManager(window)
        }
        let character = get_character()

        mapManager.set_source(character.where)
        // 角色出征 角色就是原目标

        mapEventBus.emit('map-reload', Math.random(),()=>{
            return character.get_range_cell()
        })

    }

    function someAction() {
        // 在需要刷新地图的地方触发事件
        mapEventBus.emit('map-reload');
    }

</script>
<Card config_sub="{true}">
    <div slot="badge" class="badge-chara">
        角色
    </div>
    <div slot="sub-lst">
        <div class="sub-item" on:click={character_goto}>
            <b>出征</b>(移动角色)
        </div>
        <div class="sub-item">
            <b>异动</b>(消失3回合回到指定城市)
        </div>
        <div class="sub-item">
            <b>物品</b>
        </div>
        <div class="sub-item">
            <b>更多</b>
        </div>
    </div>
    <div class="row-card character-card">
        <img src={get_character().getImage()} alt="">
        <div class="character-info">
            <div class="row">
                <span class="info-key">名称</span>
                {get_character().name}
            </div>
            <div class="row barrow">
                <span class="info-key">血量</span>
                <Bar
                        maxValue="{get_character().max_hp}"
                        value="{get_character().hp}"
                        animated="{true}"
                        color="red"
                        width="160px"
                        height="10px"
                        showText="{false}"
                />
            </div>
            <div class="row barrow">
                <span class="info-key">技能点</span>
                <Bar
                        maxValue="{get_character().max_mp}"
                        value="{get_character().mp}"
                        animated="{true}"
                        color="blue"
                        width="160px"
                        height="10px"
                        showText="{false}"
                />
            </div>

        </div>
    </div>
</Card>

<style lang="less">
  .character-card {


    .info-key {
      color: black;
      font-weight: bolder;
    }

    .character-info {
      justify-content: center;
      align-items: start;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .barrow {
        .info-key {
          float: left;
        }
      }
    }

  }

  img {
    height: 100px;
    border-radius: 50%;
    width: 100px;
  }


</style>